<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {Login} from "@/api/admin.js";
import {useUserStore} from "@/stores/user.js";
import {useRouter} from "vue-router";
import {User,Lock} from "@element-plus/icons-vue";

const router = useRouter();
const userStore = useUserStore();
const loginForm = ref({
  username: "",
  password: "",
});

const formRef = ref();

const rules = {
  username: [{required: true, message: "请输入用户名", trigger: "blur"}],
  password: [{required: true, message: "请输入密码", trigger: "blur"}],
};

const handleLogin = () => {
  console.log(loginForm.value);
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await Login({
        username: loginForm.value.username,
        password: loginForm.value.password,
      });
      ElMessage.success( "登录成功");
      userStore.setToken(res.data);
      router.push({ path: "/" });
    }
  });
};
</script>


<template>
<el-row class="login-page">
  <el-col :span="12" class="bg"></el-col>
  <el-col :span="6" :offset="3" class="form">
    
    <!-- 登录表单 -->
    <el-form ref="formRef" size="large" autocomplete="off"  :model="loginForm" :rules="rules">
      <el-form-item>
        <h1>登录</h1>
      </el-form-item>
      <el-form-item prop="username">
        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item class="flex">
      </el-form-item>
      
      <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="handleLogin">登录</el-button>
      </el-form-item>
      <el-form-item class="flex">
      </el-form-item>
    </el-form>
  
  </el-col>
</el-row>
</template>

<style  scoped>
/* 样式 */
.login-page {
  height: 100vh;
  background-color: #fff;
  
  .bg {
    background: url('/src/assets/bg2.jpg') no-repeat 60% center / 240px auto,
    url('/src/assets/bg1.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }
  
  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
    
    .title {
      margin: 0 auto;
    }
    
    .button {
      width: 100%;
    }
    
    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
